<template>
    <div class="header">
        <input type="text" placeholder="请输入城市"  class="sinput"  v-model="keyword">
        <div class="search-content" ref="search" v-show="keyword">
            <ul>
                <li class="search-item"  v-for="item in list" :key="item.id" @click="handleCityClick(item.name)">{{item.name}}</li>
                 <li class="search-item" v-show="hasNoList">没有找到匹配城市</li>
            </ul>
        </div>
    </div>
</template>

<script>
//滚动插件
import {mapState, mapMutations} from 'vuex'
import Bscroll from 'better-scroll'
 export default {
   props:{
       cities:Object
   },
   data () {
     return {
         keyword:"",
         list:[],
         timer:null,

     }
   },
   methods :{
     
       handleCityClick(city){
           this.changeCity(city)
           this.$router.push('/')
       },
         ...mapMutations(['changeCity'])
   },
   watch : {
       keyword () {
           //节流
           if(this.timer){
               clearTimeout(this.timer)
           }
               if(!this.keyword){
                    this.list = []
                   return    
               }
                this.timer = setTimeout (()=>{
                        const result = [];
                        for (let i in this.cities){
                            this.cities[i].forEach((value) => {
                                if (value.spell.indexOf(this.keyword)>-1 || value.name.indexOf(this.keyword)>-1 ){
                                    result.push(value)

                                }
                            });
                        }
                        this.list = result 
                    },100)
             
           
       }
   },
   components: {
   },
   mounted () {
        this.scroll = new Bscroll(this.$refs.search,{click:true})

   },
   computed :{
       hasNoList () {
           return !this.list.length
       }
   }
 }
</script>

<style lang="stylus" scoped> 
   .header{
       height 33PX
       background #00b5ff
       padding  0 5px
   }
   .sinput{
       height 26px
       box-sizing border-box
       line-height 26px
       width 97%
       text-align center
       border-radius 5px
       padding 0 5px
       color #666


   }
   ul{
       margin 0
       padding 0
   }
    .search-content{
        z-index 1
        overflow hidden
        position absolute
        top 80px
        left 0
        background #eeeeee
        right 0
        bottom 0
    }
    .search-item{
        line-height 30px
        border-bottom 1px solid #eee
        color #666
        padding-left 20px
        list-style none
        background #fff
    }
</style>
